<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import qs from "qs";
import { showLoadingToast } from "vant";
import { infoApi, payApi } from "@/api/tourOrderDisparity";

import FormButton from "@/components/form/button.vue";
import ListNoData from "@/components/list/no-data.vue";
import PopupModal from "@/components/popup/modal";

import { useRouter } from "vue-router";

const hrefData: any = location.href.split("?")[1];
const query = qs.parse(hrefData, { ignoreQueryPrefix: true }) as {
  id: string;
  openid?: string;
};
function getUrlParams() {
  const arr = hrefData.split("=&");
  const obj = {
    id: "",
    openid: "",
  };
  arr.forEach((item: any) => {
    const t = item.split("=");
    if (t[0] == "id") {
      obj.id = t[1];
    }
    if (t[0] == "openid") {
      obj.openid = t[1];
    }
  });
  return obj;
}
if (query.id && !query.openid) {
  localStorage.setItem("id", getUrlParams().id);
}
if (!hrefData) {
  localStorage.setItem("id", "");
} else {
  const id = getUrlParams().id;
  if (!id) {
    localStorage.setItem("id", "");
  }
}
//注释
// if (query.openid) {
//   // query.openid = query.openid.split("#")[0];
// }
export default defineComponent({
  components: { FormButton, ListNoData },
  setup() {
    const phoneNumber = ref("");
    const router = useRouter();
    const mode = ref<"pay" | "error" | "noWechat" | "">("error");
    //  `/api/v3/vip_h5/oauth?redirect_url=${encodeURIComponent(location.href)}`
    if (window.smy.getWebEnv() !== "wxWeb") {
      mode.value = "noWechat";
      return { mode };
    }
    if (!query.openid && window.smy.getWebEnv() === "wxWeb") {
      return location.replace(
        `/api/v3/vip_h5/oauth?redirect_url=${encodeURIComponent(location.href)}`
      );
    }
    const id = localStorage.getItem("id") as string;
    const reloadData = () => {
      const loading = showLoadingToast({});
      infoApi({ disparity_id: id })
        .then((resp) => {
          mode.value = resp.url_status ? "pay" : "error";
          loading.close();
          if (!resp) return;
          infoData.price = resp.price;
          infoData.orderNo = resp.out_trade_no;
          infoData.name = resp.product_name;
          infoData.date = resp.trip_date;
          infoData.tag = resp.tag_name;
          infoData.username = resp.buyer_name;
          infoData.phone = resp.buyer_phone;
          infoData.state = resp.url_status;
          infoData.payDate = resp.pay_time;
          remarkList.value = resp.disparity_desc_list;
        })
        .catch(() => loading.close());
    };
    reloadData();

    const payCallback = () => {
      PopupModal.show(
        {
          title: "温馨提示",
          content:
            "请你确认退款信息与退款金额是否正\n确，确认无误点击确认按钮，退款金\n额将自动退回你的微信零钱包中",
          confirmText: "确认",
        },
        toSuccessRefund
      );
    };
    // query.orderNo && payCallback();
    function toSuccessRefund() {
      const loading = showLoadingToast({});
      payApi({ disparity_id: id, openid: query.openid })
        .then((resp) => {
          loading.close();

          if (resp.status == 1) {
            phoneNumber.value = resp.customer_phone;
            router.push({
              name: "success",
              query: { price: infoData.price, phoneNumber: phoneNumber.value },
            });
          }
        })
        .catch(() => loading.close());
    }

    const infoData = reactive({
      price: "",
      orderNo: "",
      name: "",
      date: "",
      tag: "",
      username: "",
      phone: "",
      state: 0,
      payDate: "",
    });
    const remarkList = ref<any[]>([]);

    const payClick = () => {
      if (infoData.state === 0) return;
      payCallback();
    };
    return { mode, infoData, remarkList, payClick };
  },
});
</script>

<template>
  <!-- v-if="mode === 'error'" -->
  <!-- <ListNoData text="链接已失效">
      <img class="app-no-img" src="./assets/img/no-data.png" />
    </ListNoData> -->
  <div class="appWrap" v-if="mode === 'pay'">
    <div class="content">
      <img class="app-bg" src="../assets/img/bg.png" />
      <div class="app-info">
        <div class="app-price">{{ infoData.price }}</div>
        <div class="app-tip">退款金额</div>
      </div>
      <div class="app-title">退款说明</div>
      <div class="app-content">
        <div class="app-item">
          <div class="app-item-label">退款订单</div>
          <div class="app-item-value">{{ infoData.orderNo }}</div>
        </div>
        <div class="app-item">
          <div class="app-item-label">退款产品</div>
          <div class="app-item-value">{{ infoData.name }}</div>
        </div>
        <div class="app-item">
          <div class="app-item-label">出行日期</div>
          <div class="app-item-value">{{ infoData.date }}</div>
        </div>
        <div class="app-item">
          <div class="app-item-label">订单渠道</div>
          <div class="app-item-value">{{ infoData.tag }}</div>
        </div>
        <div class="app-item">
          <div class="app-item-label">联系人</div>
          <div class="app-item-value">{{ infoData.username }}</div>
        </div>
        <div class="app-item">
          <div class="app-item-label">联系电话</div>
          <div class="app-item-value">{{ infoData.phone }}</div>
        </div>
        <div class="app-item">
          <div class="app-item-label">退款原因</div>
          <div class="app-item-value">
            <div v-for="(i, d) of remarkList" :key="d">
              <span style="color: #e32c2c">¥{{ i.price }}</span
              >（{{ i.remark }}）
            </div>
          </div>
        </div>
      </div>
      <div class="question">
        <span>如你有其他疑问,请咨询客服</span>
        <span>16620114760</span>
      </div>
    </div>

    <div class="app-btn" v-if="infoData.state == 1" @click="payClick">
      <FormButton>领取退款</FormButton>
    </div>
  </div>
  <div class="app-no" v-if="mode === 'error'">
    <ListNoData text="退款已经领取或者链接已超时失效~">
      <img class="app-no-img" src="../assets/img/no-data.png" />
    </ListNoData>
  </div>
  <div class="app-success" v-if="mode === 'noWechat'">
    <img class="app-success-icon" src="../assets/img/icon-warning.png" />
    <div class="app-success-title">请在微信客户端打开链接</div>
  </div>
</template>

<style lang="less" scoped>
.app-success {
  padding-top: 177px;

  .app-success-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
  }

  .app-success-title {
    font-size: 20px;
    color: #333333;
    line-height: 28px;
    text-align: center;
    font-weight: bold;
  }
}
.appWrap {
  background-color: #f8f8f8;
  height: 100vh;
}
.app-bg {
  display: block;
  width: 100vw;
}

.app-info {
  position: relative;
  padding-top: 17px;
  padding-bottom: 22px;
  margin: -58px 35px 20px;
  border-radius: 5px;
  background-color: #ffffff;

  .app-price {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 40px;
    color: #40c17f;
    line-height: 50px;
    font-weight: bold;

    &::before {
      content: "¥";
      margin-right: 2px;
      font-size: 30px;
      line-height: 46px;
    }
  }

  .app-tip {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
  }
}

.app-title {
  display: flex;
  align-items: center;
  padding-left: 15px;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  font-weight: bold;

  &::before {
    content: "";
    width: 3px;
    height: 18px;
    margin-right: 8px;
    border-radius: 2px;
    background-color: #40c17f;
  }
}

.app-content {
  padding: 15px 15px 1px;
  margin: 0 15px 15px;
  border-radius: 5px;
  background-color: #ffffff;

  .app-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 15px;
    color: #666666;
    line-height: 21px;
  }

  .app-item-label {
    flex-shrink: 0;
    width: 75px;
  }

  .app-item-value {
    flex-grow: 1;
    min-width: 0;
    color: #333333;
    overflow: hidden;
  }
}

.app-btn {
  position: fixed;
  left: 15px;
  right: 15px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  border-radius: 23px;
  background-color: #ffffff;
}

.app-no {
  height: 100vh;

  .app-no-img {
    width: 267px;
    margin-bottom: 30px;
  }
}

body {
  margin: 0;
  font-family: "PingFang SC", "微软雅黑", sans-serif;
  overflow-x: hidden;
}

#app {
  min-height: 100vh;
  padding-bottom: 1px;
  background-color: #f8f8f8;

  &::after {
    content: "";
    display: block;
    width: 100vw;
    height: env(safe-area-inset-bottom);
  }
}
.question {
  text-align: center;
  :nth-child(2) {
    color: red;
  }
}
</style>
